<template>
	<view v-if="list && list.length > 0" :class="lxName == 'wbt'?'mb4':'mb2'">
		<view v-if="lxName !== 'wbt'" class="dbt flex flex_between" :class="lxName" @click="jumps(lxName)">
			<view class="left">
				{{name}}
			</view>
			<view v-if="lxName =='bt1'" class="right flex">
				<text style="margin-right: 5rpx;">查看更多</text>
				<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
			</view>
			<view v-if="lxName !=='bt1'" class="right flex">
				<text style="margin-right: 5rpx;">查看更多</text>
				<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
			</view>
		</view>
		<view v-if="lxName == 'wbt'" class="cardCont wbtCont">
			<view class="headBt flex flex_between">
				<image :src="imgHost + '/title_miaosha@2x.png'"></image>
				<view class="right flex" @click="jump2('/pages/flashSale/index')">
					<text style="margin-right: 3rpx;">更多</text>
					<u-icon name="arrow-right" color="#FE2C2E" size="22rpx"></u-icon>
				</view>
			</view>
			<image :src="imgHost + '/ic_miaosha@2x.png'" class="ms"></image>
			<view class="content">
				<view v-for="(item, index) in list" :key="index" class="box_item" @click="jumpBtn(item)">
					<view class="cont">
						<image :src="item.businessImg?item.businessImg:imgHost+'/default_list.jpg'" class="top"></image>
						<view class="bottom">
							<view class="f30 c2 limit-1-line">
								{{item.businessName || ''}}
							</view>
							<view class="f24 c9" style="margin-top: 8rpx;">
								{{item.businessInfo}}
							</view>
							<view class="zsd flex flex_between" style="margin-top: 8rpx;">
								<view class="f22">
									<text>秒杀价</text>
									<text>¥</text>
									<text>{{item.discountPrice}}</text>
									<text>¥{{item.businessOriginPrice}}</text>
								</view>
							</view>
							<view v-if="item.status == '1'" class="payBtn flex flex_between mt10">
								<u-count-down :time="item.time" format="DD:HH:mm:ss" autoStart millisecond
									@change="onChange($event, index)">
									<view class="time">
										<text v-if="item.timeData.days && item.timeData.days > 0" class="time__item">{{ item.timeData.days }}</text>
										<text v-if="item.timeData.days && item.timeData.days > 0" class="jg">天</text>
										<text
											class="time__item">{{ item.timeData.hours>=10?item.timeData.hours:'0'+item.timeData.hours}}</text>
										<text class="jg">:</text>
										<text class="time__item">{{ item.timeData.minutes }}</text>
										<text class="jg">:</text>
										<text class="time__item">{{ item.timeData.seconds }}</text>
									</view>
								</u-count-down>
								<image :src="imgHost + '/btn_qiang@2x.png'"></image>
							</view>
							<view v-if="item.status == '0'" class="payBtnb flex mt10">
								距开始
								<u-count-down :time="item.time" format="DD:HH:mm:ss" autoStart millisecond
									@change="onChange($event, index)">
									<view class="times">
										<text v-if="item.timeData.days && item.timeData.days > 0" class="time__item">{{ item.timeData.days }}</text>
										<text v-if="item.timeData.days && item.timeData.days > 0" class="jg">天</text>
										<text
											class="time__item">{{ item.timeData.hours>=10?item.timeData.hours:'0'+item.timeData.hours}}</text>
										<text class="jg">:</text>
										<text class="time__item">{{ item.timeData.minutes }}</text>
										<text class="jg">:</text>
										<text class="time__item">{{ item.timeData.seconds }}</text>
									</view>
								</u-count-down>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="lxName == 'zbt'" class="cardCont zbtCont">
			<view v-for="(item, index) in list" :key="index" class="box_item mb2 flex" @click="jumpBtn(item)">
				<image :src="imgHost + '/ic_xianshi@2x.png'" class="ms"></image>
				<image :src="item.businessImg?item.businessImg:imgHost+'/default_list.jpg'" class="left"></image>
				<view class="right">
					<view class="f30 c2 limit-1-line">
						{{item.businessName || ''}}
					</view>
					<view class="f22 c9 mt10">
						{{item.businessInfo}}
					</view>
					<view class="zsd flex mt10 flex_between">
						<view class="f22">
							<text>折扣价</text>
							<text>¥</text>
							<text>{{item.discountPrice}}</text>
							<text>¥{{item.businessOriginPrice}}</text>
						</view>
						<view v-if="item.status != '0'" class="payBtn">
							抢购
						</view>
						<view v-if="item.status == '0'" class="payBtn hui">
							即将开抢
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="lxName == 'bt2'" class="cardCont bt2Cont">
			<view v-for="(item, index) in list" :key="index" class="box_item mb2" @click="jumpBtn(item)">
				<image :src="imgHost + '/ic_xianshi@2x.png'" class="ms"></image>
				<image :src="item.businessImg?item.businessImg:imgHost+'/default_list.jpg'" class="left"></image>
				<view class="right">
					<view class="f30 c2 limit-1-line">
						{{item.businessName || ''}}
					</view>
					<view class="f22 c9 mt10">
						{{item.businessInfo}}
					</view>
					<view class="zsd flex mt10 flex_between">
						<view class="f22">
							<text>¥</text>
							<text>{{item.discountPrice}}</text>
							<text>¥{{item.businessOriginPrice}}</text>
						</view>
						<view v-if="item.status != '0'" class="payBtn">
							抢购
						</view>
						<view v-if="item.status == '0'" class="payBtn hui">
							即将开抢
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="lxName == 'bt1'" class="cardCont btCont">
			<view v-for="(item, index) in list" :key="index" class="box_item mb2" @click="jumpBtn(item)">
				<image :src="imgHost + '/ic_miaosha@2x.png'" class="ms"></image>
				<view class="head flex">
					<view class="zsd f26">
						{{item.status == '0'?'距秒杀开始：' :item.status == '1'? '距秒杀结束：':'活动已结束'}}
					</view>
					<u-count-down v-if="item.status!='2'" :time="item.time" format="DD:HH:mm:ss" autoStart millisecond
						@change="onChange($event, index)">
						<view class="time">
							<text v-if="item.timeData.days && item.timeData.days > 0" class="time__item">{{ item.timeData.days }}</text>
							<text v-if="item.timeData.days && item.timeData.days > 0" class="jg">天</text>
							<text
								class="time__item">{{ item.timeData.hours>=10?item.timeData.hours:'0'+item.timeData.hours}}</text>
							<text class="jg">:</text>
							<text class="time__item">{{ item.timeData.minutes }}</text>
							<text class="jg">:</text>
							<text class="time__item">{{ item.timeData.seconds }}</text>
						</view>
					</u-count-down>
				</view>
				<view class="cont flex">
					<image :src="item.businessImg?item.businessImg:imgHost+'/default_list.jpg'" class="left"></image>
					<view class="right">
						<view class="f30 c2 limit-1-line">
							{{item.businessName || ''}}
						</view>
						<view class="f22 c9 mt10">
							{{item.businessInfo}}
						</view>
						<view class="zsd flex mt10 flex_between">
							<view class="f22">
								<text>秒杀价</text>
								<text>¥</text>
								<text>{{item.discountPrice}}</text>
								<text>¥{{item.businessOriginPrice}}</text>
							</view>
							<view v-if="item.status != '0'" class="payBtn">
								马上抢
							</view>
							<view v-if="item.status == '0'" class="payBtn hui">
								即将开抢
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			lxName: {
				type: String,
				default: 'wbt'
			},
			name: {
				type: String,
				default: ''
			},
			showList: {
				type: Array,
				default: () => ['1', '2', '3', '4']
			},
		},
		data() {
			return {
				list: [],
			}
		},
		created() {
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jumps(name) {
				if(name == 'bt1') {
					this.jump2('/pages/flashSale/index')
				} else {
					this.jump2('/pages/flashSale/discount')
				}
			},
			jumpBtn(e) {
				if(e.businessType == '04') {
					this.jump('/pages/setmeal/detail?id=',e.businessId)
				} else if(e.businessType == '07') {
					this.jump('/pages/curriculum/detail?id=', e.businessId)
				} else if(e.businessType == '19') {
					this.jump('/subPackages/special/details?id=',e.businessId)
				} 
			},
			onChange(e, s) {
				this.list[s].timeData = e
			},
			getList() {
				let type = '1'
				if (this.lxName == 'wbt' || this.lxName == 'bt1') {
					type = '0'
				}
				this.$app.ajax({
					api: this.$api.secKillList(),
					data: {
						param: {
							rec: '1',
							type
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let list = res.recordList || []
						list.forEach((s) => {
							if (s.status == 0) {
								s.time = s.duration * 1000
							} else if (s.status == 1) {
								s.time = s.duration * 1000
							} else {
								s.time = 0
							}
							s.timeData = {}
						})
						this.list = list
					}
				}).catch(() => {})
			},
		}

	}
</script>
<style lang="scss" scoped>
	.zsd {
		color: #FE2C2E;
	}

	.dbt {
		font-size: 26rpx;
		margin: auto auto 32rpx;
		color: #666666;
		width: 690rpx;

		&.zbt {
			margin-bottom: 20rpx;
		}

		.left {
			font-size: 34rpx;
			font-weight: 600;
			color: #222222;
		}

		.right {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.zbtCont {
		.box_item {
			box-sizing: border-box;
			padding: 20rpx 16rpx;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFFCFC 40%, #FFF2D7 100%);
			border-radius: 8rpx;
			position: relative;

			.ms {
				position: absolute;
				left: 8rpx;
				z-index: 2;
				width: 76rpx;
				height: 46rpx;
				top: 10rpx;
			}

			.left {
				width: 260rpx;
				height: 148rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				flex: none;
			}

			.right {
				flex: 1;

				.zsd {
					height: 52rpx;

					.f22 {
						text {
							display: inline-block;

							&:nth-of-type(2) {
								margin-left: 4rpx;
							}

							&:nth-of-type(3) {
								font-size: 32rpx;
								font-weight: bolder;
							}

							&:nth-of-type(4) {
								margin-left: 8rpx;
								text-decoration: line-through;
								color: #999999;
							}
						}
					}
				}

				.payBtn {
					width: 84rpx;
					height: 52rpx;
					text-align: center;
					line-height: 52rpx;
					background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
					border-radius: 26rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #FFFFFF;
					&.hui {
						width: 136rpx;
						background: linear-gradient(270deg, #FE2C2E 0%, #FF7C30 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
						opacity: 0.6;
					}
				}
			}
		}
	}

	.bt2Cont {
		display: flex;
		flex-wrap: wrap;

		.box_item {
			box-sizing: border-box;
			width: 334rpx;
			padding: 16rpx;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFFCFC 40%, #FFF2D7 100%);
			border-radius: 8rpx;
			position: relative;
			margin-right: 22rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.ms {
				position: absolute;
				left: 8rpx;
				z-index: 2;
				width: 76rpx;
				height: 46rpx;
				top: 8rpx;
			}

			.left {
				width: 260rpx;
				height: 148rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				flex: none;
			}

			.right {
				flex: 1;

				.zsd {
					height: 52rpx;

					.f22 {
						text {
							display: inline-block;

							&:nth-of-type(2) {
								font-size: 32rpx;
								font-weight: bolder;
							}

							&:nth-of-type(3) {
								margin-left: 8rpx;
								text-decoration: line-through;
								color: #999999;
							}
						}
					}
				}

				.payBtn {
					width: 84rpx;
					height: 52rpx;
					text-align: center;
					line-height: 52rpx;
					background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
					border-radius: 26rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #FFFFFF;
					&.hui {
						width: 136rpx;
						background: linear-gradient(270deg, #FE2C2E 0%, #FF7C30 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
						opacity: 0.6;
					}
				}
			}
		}
	}

	.btCont {
		.box_item {
			box-sizing: border-box;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFD7DB 100%);
			border-radius: 8rpx;
			position: relative;

			.ms {
				position: absolute;
				right: 34rpx;
				z-index: 2;
				width: 88rpx;
				height: 88rpx;
				top: 0rpx;
			}

			.head {
				height: 88rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.zsd {
					font-weight: Medium;
				}

				.time {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FE2C2E;

					text {
						display: inline-block;

						&.jg {
							margin: 0 8rpx;
						}

						&.time__item {
							width: 44rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							background: linear-gradient(270deg, #FE2C2E 0%, #FF5B30 100%);
							border-radius: 16rpx;
							font-size: 26rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: Medium;
							color: #FFFFFF;
						}
					}
				}

			}

			.cont {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 8rpx 8rpx;
				padding: 16rpx;
				box-sizing: border-box;

				.left {
					width: 212rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 16rpx;
					flex: none;
				}

				.right {
					flex: 1;

					.zsd {
						height: 52rpx;

						.f22 {
							text {
								display: inline-block;

								&:nth-of-type(2) {
									margin-left: 4rpx;
								}

								&:nth-of-type(3) {
									font-size: 32rpx;
									font-weight: bolder;
								}

								&:nth-of-type(4) {
									margin-left: 8rpx;
									text-decoration: line-through;
									color: #999999;
								}
							}
						}
					}

					.payBtn {
						width: 110rpx;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						background: linear-gradient(270deg, #FE2C2E 0%, #FF6A1F 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
						border-radius: 26rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FFFFFF;

						&.hui {
							width: 136rpx;
							background: linear-gradient(270deg, #FE2C2E 0%, #FF7C30 100%);
							box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 44, 46, 0.24);
							opacity: 0.6;
						}
					}
				}
			}
		}
	}

	.wbtCont {
		background: linear-gradient(360deg, #FFFFFF 0%, #FFD7DB 100%);
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 24rpx 16rpx 20rpx 16rpx;
		position: relative;

		.ms {
			position: absolute;
			right: 144rpx;
			z-index: 2;
			width: 88rpx;
			height: 88rpx;
			top: 0rpx;
		}

		.headBt {
			box-sizing: border-box;
			padding: 0 8rpx 10rpx;

			image {
				width: 166rpx;
				height: 34rpx;
			}

			.right {
				width: 100rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				justify-content: center;

				text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FE2C2E;
				}
			}
		}

		.content {
			display: flex;
			flex-wrap: wrap;
		}

		.box_item {
			box-sizing: border-box;
			width: 324rpx;
			padding: 16rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			margin-right: 10rpx;
			margin-top: 10rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.cont {
				background: #FFFFFF;
				box-sizing: border-box;

				.top {
					width: 100%;
					height: 164rpx;
					border-radius: 8rpx;
					flex: none;
				}

				.bottom {
					flex: 1;

					.zsd {
						height: 52rpx;

						.f22 {
							text {
								display: inline-block;

								&:nth-of-type(2) {
									margin-left: 4rpx;
								}

								&:nth-of-type(3) {
									font-size: 32rpx;
									font-weight: bolder;
								}

								&:nth-of-type(4) {
									margin-left: 8rpx;
									text-decoration: line-through;
									color: #999999;
								}
							}
						}
					}


				}

				.payBtn {
					height: 54rpx;
					background: #FDF0F1;
					border-radius: 28rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.time {
						display: inline-block;
						font-weight: Medium;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FE2C2E;
					}

					image {
						width: 84rpx;
						height: 54rpx;
					}
				}
				.payBtnb {
					height: 54rpx;
					background: rgba(254,168,44,0.1);
					border-radius: 28rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #FF8300;
					justify-content: center;
					
					.times {
						display: inline-block;
						font-weight: Medium;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: Medium;
						color: #FF8300;
					}
				}
			}
		}
	}
</style>